<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view class="myView">
		<!-- 照片背景图 -->
		<view>
			<image src="../static/titcket/advertising.png" class="imageTop" mode="aspectFill"></image>
		</view>
		<!-- 车票查询 -->
		<view class="queryTickets">
			<!-- <view style="width: 100%;height: 88rpx;"> -->
				<!-- <view style="background-color: #FFFFFF;width: 353rpx;border-top-left-radius: 20rpx;opacity: 0.8;"
					:style="{backgroundColor:typeNum == 0 ? '#FFFFFF' : '#393939'}" @click="typeClick('expressTicket')">
					<view class="jh_fs_32 flex-center" style="line-height: 88rpx;text-align: center;"
						:style="{color:typeNum == 0 ? '#000000' : '#FFFFFF'}">城际出行</view>
				</view>
				<view style="background-color: #393939;width: 353rpx;border-top-right-radius: 20rpx;opacity: 0.8;"
					:style="{backgroundColor:typeNum == 1 ? '#FFFFFF' : '#393939'}" @click="typeClick('carTicket')">
					<view class="jh_fs_32 flex-center" style="line-height: 88rpx;text-align: center;color: #FFFFFF;"
						:style="{color:typeNum == 1 ? '#000000' : '#FFFFFF'}">汽车票</view>
				</view> -->
				<!-- <u-tabs :list="titleList" :is-scroll="false" :current="current" @change="tabChange"></u-tabs> -->
			<!-- </view> -->

			<view class="ticketView">
				<view class="lineClass">
					<view class="start" style="font-size: 38rpx;" @click="startStationTap">
						<!-- :class="{'translateXR':isTranslateX}"动画有bug，暂时不做 -->
						<input class="row-translateX" style="text-align: center;color: #000;font-size: 38rpx;font-weight: 400;height: 50rpx;" disabled placeholder="选择上车点" v-model="departure" />
					</view>
					
					<image src="../../static/map/change.png" mode="aspectFill" class="row-rotate" :class="{'rotate':isTranslateX}"
						style="width: 57rpx;height: 59rpx;margin-top: 40rpx;" @click="changeClick"></image>
						
					<view class="end" style="font-size: 38rpx;" @click="endStationTap">
						<input class="row-translateX" style="color: #000;text-align: center;font-size: 38rpx;font-weight: 400;height: 50rpx;" disabled placeholder="选择下车点" v-model="destination" />
					</view>
				</view>

				<view class="lineClass">
					<view style="border-bottom: 1upx solid #dadada;width: 400rpx;" @click="calendarSelect">
						<view class="dateClass" style="margin-left: 38rpx;font-size: 38rpx;font-weight: 400;">{{selectDate}}</view>
					</view>
				</view>
				<view class="queryView">
					<button class="queryButton" style="font-size: 38rpx;font-weight: 400;" @click="queryClick">查 询</button>
				</view>
			</view>

			<view class="historyView">
				<view style="justify-content: space-between; align-items: center;flex-direction: row;">
					<text class="historyTitle jh_fs_28">历史记录</text>
					<text class="clearHistory jh_fs_28" @click="clickHistory">清除历史</text>
				</view>
				<view class="historyListView">
					<!-- <text class="historyText jh_fs_24 jh_ellipsis" @click="historyItemTap(index)" v-for="(i,index) in historyLines"
						:key=index v-if="index<5">{{i}}</text> -->
						<view class="historyText jh_fs_30" @click="historyItemTap(index)" v-for="(i,index) in historyLines"
							:key=index v-if="index<5">{{i}}</view>
				</view>  
			</view>
		</view>
		<uni-calendar ref="calendar" :insert="false" :start-date="'1997-01-01'" @confirm="confirm"></uni-calendar>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				fontSize:'',
				isTranslateX:false,
				normalPickerNum: 0,
				specialPickerNum: 0,
				isNormal: 0,
				historyLines: [],
				departure: '',
				destination: '',
				selectDate:'',
				typeNum: 1,
				changeText: '',
				dateShow:true,
				popDate:'',
				startStation:'',//实际起始站
				startLatitude:'',
				startLongitude:'',
				endLatitude:'',
				endLongitude:'',
				endStation:'',//实际终点站
				current:1,
				titleList:[
					{
						name:'城际快车'
					},
					{
						name:'汽车票'
					},
					{
						name:'定制巴士'
					}
				],
			};
		},
		onLoad(params) {
			_self = this;
			_self.fontSize = getApp().globalData.fontSize;
			_self.selectDate = _self.getTodayDate();
			_self.popDate = _self.getTodayDate();
			//读取历史记录
			uni.getStorage({
				key:'historyLines',
				success:function(data){
					console.log(data);
					if(data.data){
						_self.historyLines = data.data;
						if(_self.historyLines.length>0){
							var station = data.data[0].split('-');
							_self.departure = station[0];
							_self.destination = station[1];
							//实际起始站
							_self.startStation = station[0];
							//实际终点站
							_self.endStation = station[1];
						}
					}
				}
			})
		},
		methods: {
			//---------------------------------点击车票类型---------------------------------
			typeClick(params) {
				if (params == 'expressTicket') {
					uni.navigateBack();
				}
			},
			
			//---------------------------------点击起点站---------------------------------
			startStationTap() {
				//监听事件,监听下个页面返回的值
				uni.$on('startStationChange', function(data) {
					console.log('起点---',data);
					_self.departure = data.data;
					//实际起始站
					_self.startStation = data.data;
					_self.startLatitude = data.StationLocation.split(',')[1];
					_self.startLongitude = data.StationLocation.split(',')[0];
				    //清除监听，不清除会消耗资源
				    uni.$off('startStationChange');
				});
				uni.navigateTo({
					url:'../stationPicker/stationPicker?stationType=' + 'start'
				})
			},
			//---------------------------------点击终点站---------------------------------
			endStationTap() {
				//监听事件,监听下个页面返回的值
				uni.$on('endStationChange', function(data) {
					console.log('终点---',data);
					_self.destination = data.data;
					//实际终点站
					_self.endStation = data.data;
					_self.endLatitude = data.StationLocation.split(',')[1];
					_self.endLongitude = data.StationLocation.split(',')[0];
				    //清除监听，不清除会消耗资源
				    uni.$off('endStationChange');
				});
				uni.navigateTo({
					url:'../stationPicker/stationPicker?stationType=' + 'end'
				})
			},
			tabChange:function(index){
				console.log(1122);
				_self.current = index;
				switch (index) {
					case 0:
						uni.navigateBack();
						break;
					case 1:
						
						break;
					case 2:
					    uni.$emit('changeTitle');
					    uni.navigateBack();
						break;
				}
			},
			changeClick() {
				_self.isTranslateX = !_self.isTranslateX;
				
				if(_self.destination != '' && _self.departure != ''){
					_self.changeText = _self.departure;
					_self.departure = _self.destination;
					_self.destination = _self.changeText;
				}
				console.log('起点'+_self.departure,'终点' + _self.destination);
			},
			//---------------------------------查询---------------------------------
			queryClick() {
				if(_self.departure == '' || _self.destination == '') {
					uni.showToast({
						title: '请选择上下车点',
						icon: 'none'
					})
				}else {
					var station = _self.departure + "-" + _self.destination;
					if(_self.historyLines) {
						for(let i = 0; i <= _self.historyLines.length;i++){ 
							if(station == _self.historyLines[i]) { 
								_self.historyLines.splice(i,1);
							}
						}
						_self.historyLines.unshift(_self.departure + "-" + _self.destination);
					}
					uni.setStorage({
						key:'historyLines',
						data:_self.historyLines,
					})
					var stationInfo = {
						type:'客运',
						selectDate:_self.popDate.replace(/-/g,'/'),
						startStation:_self.departure,
						endStation:_self.destination,
						// startStation : '延平',
						// endStation : '建瓯',
						startLatitude:_self.startLatitude, 
						startLongitude:_self.startLongitude,
						endLatitude:_self.endLatitude,
						endLongitude:_self.endLongitude
					}
					uni.navigateTo({
						url:'../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
					})
					// uni.navigateTo({
					// 	url:'../../pages/Home/TravelMode?stationInfo=' + JSON.stringify(stationInfo)
					// })
				}
			},
			//---------------------------------清除历史---------------------------------
			clickHistory() {
				_self.historyLines = [];
				uni.setStorage({
					key:'historyLines',
					data:_self.historyLines,
				})
			},
			//---------------------------------点击历史记录---------------------------------
			historyItemTap(index) {
				let stationArray = _self.historyLines[index].split('-');
				_self.departure = stationArray[0];
				_self.destination = stationArray[1];
				var stationInfo = {
					type:'客运',
					selectDate:_self.popDate.replace(/-/g,'/'),
					startStation:_self.departure,
					endStation:_self.destination,
					startLatitude:_self.startLatitude,
					startLongitude:_self.startLongitude,
					endLatitude:_self.endLatitude,
					endLongitude:_self.endLongitude
				}
				uni.navigateTo({
					url:'../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//---------------------------------打开日历---------------------------------
			calendarSelect:function(){
				_self.$refs.calendar.open();
			},
			//---------------------------------日期确定---------------------------------
			confirm(params) {
				console.log(params);
				_self.dateShow = false;
				_self.selectDate = params.fulldate + ' ' + params.lunar.ncWeek;
				_self.popDate = params.fulldate;
			},
			//---------------------------------获取当前日期---------------------------------
			getTodayDate() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
			    var timer = year + '-' + month + '-' + day;
				return timer;
			},
		}
	}
</script>

<style lang="scss">
	.myView {
		flex-direction: column;
		width: 750rpx;
	}

	// 背景图片
	.imageTop {
		width: 750rpx;
		height: 350upx;
	}

	//查询车票整块
	.queryTickets {
		width: 706rpx;
		border-radius: 20rpx;
		// left: 22rpx;
		margin-left: 22rpx;
		// margin-top: -60rpx;
		font-weight: 400;
	}

	.ticketView {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	//选择起始点
	.lineClass {
		// margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		padding-left: 20upx;
		padding-right: 20upx;

	}

	//转换图片
	.changeImage {

		width: 57upx;
		height: 59upx;
		padding-top: 44upx;
		margin: 0 auto;

	}

	//出发点
	.start {
		font-weight: 400;
		color: #2C2D2D;
		width: 260rpx;
		text-align: left;
		border-bottom: 1upx solid #dadada;
		margin-top: 70rpx;
		padding-bottom: 20rpx;
		position: relative;
		margin-right: 30rpx;
	}
	.end {
		font-weight: 400;
		color: #2C2D2D;
		width: 260upx;
		text-align: left;
		border-bottom: 1upx solid #dadada;
		margin-top: 70rpx;
		padding-bottom: 20rpx;
		position: relative;
		margin-left: 30rpx;
	}

	//选择日期
	.dateClass {
		font-weight: 400;
		line-height: 125upx;
		margin-left: 10rpx;
	}

	//查询视图
	.queryView {
		margin-top: 60upx;
		margin-left: 29upx;
		margin-right: 29upx;
		padding-bottom: 40rpx;
	}

	//查询
	.queryButton {
		width: 620rpx;
		height: 90upx;
		background: linear-gradient(270deg, #EC5249, #EF7D4E);
		color: #FFFFFF;
		border-radius: 45upx;
	}

	.historyView {
		padding-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		width: 706upx;
		height: 380rpx;
		font-family: MicrosoftYaHei;
		color: #999999;
		font-size: 36upx;
	}

	.historyTitle {
		color: #2C2D2D;
		margin-left: 20rpx;
		font-weight: 400;
	}

	.historyListView {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		color: #999999;
		// font-size: 20rpx;
		font-weight: 400;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.historyText {
		margin-top: 20rpx;
		margin-right: 20rpx;
		color: #666666;
		font-weight: 400;
		// width: 200rpx;
	}

	.clearHistory {
		color: #2C2D2D;
		margin-right: 20rpx;
		float: right;
		font-weight: 400;
	}
	.row-rotate{
	    transition-duration:0.3s;
	    transform:rotate(0deg);
	}
	.rotate{
	    transition-duration:0.3s;
	    transform:rotate(720deg);
	}
	.row-translateX{
	    transition-duration:0.3s;
	    transform:translateX(0px);
	}
	.translateXR{
	    transform:translateX(190px);
	}
	.translateXL{
	    transform:translateX(-190px);
	}
</style>
